import { Button, Checkbox, Input, Modal, Radio, Text } from "@nextui-org/react";
import { BASEURL } from "./config";
import { Notification } from "@douyinfe/semi-ui";
import { mutate } from "swr";

export default function EditExam(props) {
  const {
    editDialogVisiable,
    setEditDialogVisiable,
    editDialogData,
    setEditDialogData,
  } = props;
  return (
    <Modal
      closeButton
      aria-labelledby="编辑考试信息"
      open={editDialogVisiable}
      onClose={() => setEditDialogVisiable(false)}
    >
      <Modal.Header>
        <Text id="modal-title" size={18}>
          <Text b size={18}>
            修改考试信息
          </Text>
        </Text>
      </Modal.Header>
      <Modal.Body>
        <Input
          color="primary"
          size="lg"
          label="届次"
          type="number"
          initialValue={editDialogData.year}
          readOnly
        />
        <Input
          color="primary"
          size="lg"
          label="考试名称"
          type="text"
          initialValue={editDialogData.name}
          readOnly
        />
        <Input
          color="primary"
          size="lg"
          label="考试日期"
          type="date"
          initialValue={editDialogData.time}
          onChange={(e) => {
            let date = new Date(e.target.value);
            let dateStr = date.getFullYear() + "-";
            dateStr += date.getMonth() + 1 < 10 ? "0" : "";
            dateStr += date.getMonth() + 1 + "-";
            dateStr += date.getDate() < 10 ? "0" : "";
            dateStr += date.getDate();
            setEditDialogData({
              ...editDialogData,
              time: dateStr,
            });
          }}
        />
        <Radio.Group
          value={editDialogData.status}
          row
          size="sm"
          onChange={(e) =>
            setEditDialogData({
              ...editDialogData,
              status: e,
            })
          }
        >
          <Radio value="已归档">已归档</Radio>
          <Radio value="正在录入">正在录入</Radio>
          <Radio value="开放查询">开放查询</Radio>
        </Radio.Group>
        <Checkbox.Group
          defaultValue={editDialogData.subjects}
          label="选择科目"
          size="sm"
          onChange={(e) =>
            setEditDialogData({
              ...editDialogData,
              subjects: e,
            })
          }
        >
          <div className="space">
            <Checkbox value="语文">语文</Checkbox>
            <Checkbox value="数学">数学</Checkbox>
            <Checkbox value="英语">英语</Checkbox>
          </div>
          <div className="space">
            <Checkbox value="政治">政治</Checkbox>
            <Checkbox value="历史">历史</Checkbox>
            <Checkbox value="地理">地理</Checkbox>
          </div>
          <div className="space">
            <Checkbox value="物理">物理</Checkbox>
            <Checkbox value="化学">化学</Checkbox>
            <Checkbox value="生物">生物</Checkbox>
          </div>
        </Checkbox.Group>
      </Modal.Body>
      <Modal.Footer>
        <Button auto flat onClick={() => setEditDialogVisiable(false)}>
          关闭
        </Button>
        <Button
          auto
          onClick={() => {
            let subjects = {};
            editDialogData.subjects.forEach((subject) => {
              subjects[subject] = {};
            });
            fetch(
              `${BASEURL}/exams/${editDialogData.year}/${editDialogData.name}`,
              {
                method: "PUT",
                headers: {
                  "Content-Type": "application/json",
                  Authorization: `Bearer ${localStorage.getItem("token")}`,
                },
                body: JSON.stringify({
                  time: editDialogData.time,
                  status: editDialogData.status,
                  subjects: subjects,
                }),
              }
            )
              .then((res) => res.json())
              .then((res) => {
                if (typeof res.detail === "undefined") {
                  Notification.success({
                    content: `修改成功`,
                  });
                } else {
                  Notification.error({
                    content: `修改失败 ${res.detail.msg}`,
                  });
                }
                mutate(`${BASEURL}/exams/metadata`);
              })
              .catch((err) => {
                Notification.error({
                  content: `修改失败 ${err}`,
                });
              });
            setEditDialogVisiable(false);
            setEditDialogData({});
          }}
        >
          提交
        </Button>
      </Modal.Footer>
    </Modal>
  );
}
